<template>
  <div class="old_star">
    <h3>往期艺术之星</h3>
    <div class="star" v-for="v in list">
      <div class="top">
        <div class="left">
          <img :src="v.src" alt="">
        </div>
        <div class="right">
          <div class="name">{{v.name}}</div>
          <div class="info">{{v.info}}</div>
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li class="art" v-for="i in v.arts">
            <img :src="i.art_src" alt="">
            <p class="price">{{i.art_price}}</p>
            <p class="name">{{i.art_name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name: '',
  data () {
    return {
      list: [
        {
          name: '吴霜',
          info: '出生于重庆 毕业于中央美术学院',
          src: require('../../assets/img/artist/wushuan(1).png'),
          arts: [
            {
              art_src: require('../../assets/img/artist/yunlv.jpg'),
              art_name: '韵律',
              art_price: '￥870'
            },
            {
              art_src: require('../../assets/img/artist/20170919161438037c7665aab.jpg'),
              art_name: '蝶恋花',
              art_price: '￥921'
            }
          ]
        },
        {
          name: '张占占',
          info: '出生于河北 现居北京',
          src: require('../../assets/img/artist/zhangzhanzhan(1).png'),
          arts: [
            {
              art_src: require('../../assets/img/artist/201908121848377784015eaa8.jpg'),
              art_name: '粉红兔',
              art_price: '￥1,980'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped lang="less">
  .old_star{
    h3{
      text-align: center;
    }
    .star{
      width: 100%;
      .top{
        height: 60px;
        .left{
          display: inline-block;
          float: left;
          img{
            width: 60px;
            height: 60px;
          }
        }
        .right{
          display: inline-block;
          margin-top: 4px;
          float: left;
          .name{
            margin-left: 10px;
            font-weight: bold;
          }
          .info{
            font-size: 0.9em;
            color: #666;
            margin-left: 10px;
          }
        }
      }
      .bottom{
        ul{
          display: flex;
          width: 100%;
          margin: 10px 0;
          li{
            width: 40%;
            margin: 6px;
            img{
              width: 100%;
            }
            .price{
              margin: 0 10px;
              text-align: right;
              font-size: 0.8em;
            }
            .name{
              margin: 0 10px;
              text-align: right;
              font-size: 0.8em;
              color: #666;
            }
          }
        }
        
      }
    }
  }
</style>